<!-- 修改费用 -->
<!-- eslint-disable vue/no-mutating-props -->
<template>
  <a-modal
    v-model:visible="showModal"
    @close="onClose"
    @before-ok="submitFn"
    title="修改费用"
    class="modal-dialog-wrapper"
    :mask-closable="false"
    unmount-on-close
    width="65vw"
  >
    <div class="mains-tlt">
      <div></div>
      <div>{{ supplierType == 1 ? '保养' : '' }}{{ supplierType == 2 ? '维修' : '' }}{{ supplierType == 3 ? '年检' : '' }}内容</div>
      <div class="choose-mains" @click="chooseMarins" v-if="supplierType == 1 || supplierType == 2"
        >选择{{ supplierType == 1 ? '保养' : '' }}{{ supplierType == 2 ? '维修' : '' }}项目</div
      >
      <div class="choose-mains" @click="addMarins" v-if="supplierType == 3">添加{{ supplierType == 3 ? '年检' : '' }}项目</div>
    </div>
    <page-form :model="form" layout="vertical" ref="formRef" class="page-form">
      <div class="mains">
        <div class="mains-form-items">
          <div class="mains-form-item" v-for="(item, index) in form.detailList" :key="item.id">
            <div class="mains-form-tlt" v-if="supplierType == 1 || supplierType == 2">
              <div class="mains-form-tlt-name"
                >{{ supplierType == 1 ? '保养' : '' }}{{ supplierType == 2 ? '维修' : '' }}项目:{{ item.itemName }}</div
              >
              <div class="main-icon" style="color: #ea0000" @click="deleteMain(item)">
                <SvgIcon name="main-delete" color="#ea0000" />
                删除
              </div>
            </div>
            <div class="mains-form-in">
              <div class="mains-form-in-c">
                <page-form-item v-if="supplierType == 3" label="费用名称" :size="supplierType == 3 ? '1/3' : '1/5'">
                  <i-input placeholder="请输入" v-model="item.itemName" :maxLength="30" />
                </page-form-item>
                <page-form-item v-if="supplierType == 1 || supplierType == 2" label="品牌" size="1/5">
                  <i-input placeholder="请输入" v-model="item.brand" :maxLength="30" />
                </page-form-item>
                <page-form-item v-if="supplierType == 1 || supplierType == 2" label="单价" size="1/5">
                  <a-input-number
                    :max="99999999.99"
                    :min="0"
                    placeholder="请输入"
                    v-model="item.unitPrice"
                    @blur="count($event, index, 'price')"
                    hide-button
                    :precision="2"
                    :max-length="10"
                  >
                    <template #suffix> 元 </template>
                  </a-input-number>
                </page-form-item>
                <page-form-item v-if="supplierType == 1 || supplierType == 2" label="数量" size="1/5">
                  <a-input-number
                    placeholder="请输入"
                    v-model="item.costQuantity"
                    @blur="count($event, index, 'num')"
                    hide-button
                    :precision="0"
                    :max-length="8"
                  >
                    <template #suffix> 个 </template>
                  </a-input-number>
                </page-form-item>
                <page-form-item
                  :size="supplierType == 3 ? '1/3' : '1/5'"
                  :label="supplierType == 3 ? '金额' : '总价'"
                  :field="`detailList[${index}].amount`"
                  :rules="{ required: true, message: supplierType == 3 ? '请输入金额' : '请输入总价' }"
                >
                  <a-input-number
                    placeholder="请输入"
                    v-model="item.amount"
                    @blur="materialPriceCount($event, index, 'materialPrice')"
                    hide-button
                    :precision="2"
                    :max="99999999.99"
                  >
                    <template #suffix> 元 </template>
                  </a-input-number>
                </page-form-item>
                <page-form-item label="备注" :size="supplierType == 3 ? '1/3' : '1/5'">
                  <i-input placeholder="请输入" v-model="item.remark" :maxLength="30" />
                </page-form-item>
              </div>
              <div v-if="supplierType == 3" class="main-icon" style="color: #ea0000" @click="deleteMain(item)">
                <SvgIcon name="main-delete" color="#ea0000" />
                删除
              </div>
            </div>
            <div class="mains-line" v-if="form.detailList.length != index + 1"></div>
          </div>
        </div>
      </div>
    </page-form>
    <div class="all-count" v-if="form.detailList && form.detailList.length > 0">
      <!-- <icon-info-circle-fill style="font-size: 16px; color: #165dffff; margin-right: 4px" /> -->
      <!-- <icon-exclamation-circle style="font-size: 16px; color: #165dffff; margin-right: 4px" /> -->
      合计：<span>{{ maintenanceAmount ? maintenanceAmount : '0' }}元</span>
    </div>
    <template #footer>
      <a-space>
        <a-button @click="() => (showModal = false)">关闭</a-button>
        <a-button type="primary" @click="submitFn">确认</a-button>
      </a-space>
    </template>
    <mains ref="maintenance" :type="1" @saveCheck="getCheck" />
    <a-modal v-model:visible="deleteVisible" width="45vw" @ok="deleteOk" @cancel="deleteCancel">
      <template #title> 提示 </template>
      <div>费项删除会影响费用信息，是否删除？</div>
    </a-modal>
  </a-modal>
</template>

<script setup name="CarMaintenanceEditFees">
  import { ref } from 'vue'
  import { getCarAssetFeeDetailDtoById, batchUpdateCarAssetFee } from '@/api/finance/costConfirm'
  import { Message } from '@arco-design/web-vue'
  const showModal = ref(false)
  const supplierType = ref(null)
  const feeId = ref(null)
  const businesId = ref(null)
  const feeCategory = ref(null)
  const formRef = ref(null)
  const deleteVisible = ref(false)

  const show = (id, pageSupplierType) => {
    showModal.value = true
    feeId.value = id
    supplierType.value = pageSupplierType //0 购置费 1保养 2维修 3年检 4违章
    if (feeId.value) {
      getDetail()
    }
  }

  const getDetail = () => {
    getCarAssetFeeDetailDtoById({ id: feeId.value, feeCategory: supplierType.value }).then((res) => {
      const result = res.result
      console.log('result', result)
      businesId.value = result.businesId
      feeCategory.value = result.feeCategory
      form.value.detailList = result.feeDetailList
      getAllCount()
    })
  }

  const form = ref({
    detailList: [],
  })

  // 弹窗选择的项目回显
  const getCheck = (e) => {
    // console.log('弹窗选择的项目回显', e)
    // console.log('form.value.detailList', form.value.detailList)
    var arr = form.value.detailList
    if (e && e.length) {
      e.forEach((el) => {
        if (arr && arr.length) {
          arr.forEach((ol) => {
            if (el.itemNameId == ol.itemNameId) {
              el = ol
              console.log('ol', ol)
              console.log('el', el)
            }
          })
        }
      })
      // console.log('eee2', e)
    }
    form.value.detailList = e
    // console.log('eeeee', e)
    getAllCount() //重新计算
  }

  // 计算单个价格
  const count = (e, index) => {
    // console.log(form.value.detailList[index].costQuantity)
    form.value.detailList[index].amount = form.value.detailList[index].costQuantity * form.value.detailList[index].unitPrice
    getAllCount()
  }

  // 单个总价输入
  const materialPriceCount = () => {
    maintenanceAmount.value = 0
    getAllCount()
  }

  // 计算总价
  const maintenanceAmount = ref(null)
  const getAllCount = () => {
    maintenanceAmount.value = 0
    form.value.detailList.forEach((i) => {
      maintenanceAmount.value += i.amount ? i.amount : 0
    })
    console.log('总价', maintenanceAmount.value)
  }

  // 选择保养项目(新增/编辑)
  const maintenance = ref(null)
  const chooseMarins = () => {
    var newSupplierType = supplierType.value == 1 ? 1 : 0
    maintenance.value.show(form.value.detailList ? form.value.detailList : [], newSupplierType) //1保养 0维修
  }

  // 添加年检项目
  const addMarins = () => {
    form.value.detailList.push({
      itemName: undefined,
      amount: undefined,
      remark: undefined,
    })
  }

  // 删除保养项目(新增/编辑)
  const deleteMain = (e) => {
    form.value.detailList = form.value.detailList.filter(function (item) {
      return item !== e
    })
    getAllCount() //重新计算
  }
  const emit = defineEmits(['feepageConfirm'])
  const deleteOk = () => {
    const param = {
      businesId: businesId.value,
      feeDetailList: form.value.detailList,
      feeCategory: feeCategory.value,
      id: feeId.value,
    }
    batchUpdateCarAssetFee(param)
      .then((res) => {
        if (res.code == 200) {
          emit('feepageConfirm')
          Message.success(res.message)
          showModal.value = false
        }
      })
      .finally((error) => {
        Message.warning(error.message)
      })
  }
  const submitFn = () => {
    formRef.value.validate((error) => {
      if (!error) {
        if (form.value.detailList.length == 0) {
          deleteVisible.value = true
        } else {
          deleteOk()
        }
      }
    })
  }
  defineExpose({
    show,
  })
</script>

<style lang="less" scoped>
  .mains-tlt {
    font-size: 14px;
    color: #1d2129;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 12px;
    div:nth-child(1) {
      width: 3px;
      height: 16px;
      background-color: #165dff;
    }
    div:nth-child(2) {
      color: #1d2129;
      font-size: 14px;
      font-weight: 500;
      margin: 0 16px 0 8px;
    }
    .choose-mains {
      display: inline-block;
      padding: 5px 16px;
      color: #fff;
      font-size: 14px;
      font-weight: 500;
      background: #1890ff;
      border-radius: 2px;
    }
  }
  .mains {
    position: relative;
    width: 100%;
    background-color: rgba(247, 248, 250, 0.5);
    padding: 20px;

    .mains-items {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      .mains-item {
        margin-top: 10px;
        margin-right: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 3px 8px;
        border: 1px solid #e5e6eb;
        border-radius: 2px;
      }
    }
    .mains-form-items {
      width: 100%;
      .mains-form-item {
        width: 100%;
        .mains-form-tlt {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .mains-form-tlt-name {
            color: var(--color-text-1);
            font-weight: 500;
          }
          .main-icon {
            margin-left: 22px;
            cursor: pointer;
          }
        }
        .mains-form-in {
          width: 100%;
          margin-top: 16px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          // .mains-form-initem {
          //   width: 20%;
          //   margin-right: 10px;
          //   display: flex;
          //   flex-direction: column;
          //   justify-content: flex-start;
          //   align-items: flex-start;
          // }
          .mains-form-in-c {
            flex: 1;
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
        }
        .mains-line {
          width: 100%;
          height: 1px;
          background-color: #f2f3f5;
          margin: 20px 0;
        }
      }
    }
  }
  .operate-btn {
    font-size: 14px;
    height: 32px;
    line-height: 32px;
    white-space: nowrap;
    outline: none;
    cursor: pointer;
    user-select: none;
    padding: 0 5px;
    icon {
      margin-right: 8px;
    }
    &.del {
      color: #ea0000;
    }
    &.new {
      color: #165dff;
    }
  }
  .box {
    width: 200px;
    height: 40px;
    border: 1px solid wheat;
  }
  .box:hover {
    transform: scale(1.1);
    transition: transform 0.3s;
    position: relative;
    z-index: 999;
  }
  .quick-search {
    display: flex;
    margin-bottom: 20px;
  }
  .quick-search-item {
    width: 16%;
    height: 62px;
    padding: 9px 0 9px 16px;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    border: 1px solid #e5e8ef;
  }
  .quick-search-item:hover {
    transform: scale(1.1);
    transition: transform 0.3s;
    position: relative;
    z-index: 999;
  }
  .quick-search-item-checked {
    background: #e8f3ff;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    border: 1px solid #1890ff;
  }
  .quick-search-item:nth-of-type(n + 2) {
    margin-left: 20px;
  }
  .quick-search-item-label {
    font-size: 12px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #4e5969;
  }
  .quick-search-item-value {
    font-size: 20px;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #1d2129;
  }
  .quick-search-item-value-checked {
    color: #1890ff;
  }
  :deep(.arco-table-expand-btn) {
    width: 20px;
    height: 20px;
    background-color: inherit;
  }
  :deep(.arco-table-expand-btn:hover) {
    width: 20px;
    height: 20px;
    background-color: inherit;
  }
  .second-stage {
    width: 200px;
    margin-left: 260px;
  }
  .third-stage {
    width: 200px;
    margin-left: 30px;
  }
  .page-form {
    margin: 0;
    // padding: 0 60px;
    :deep(.arco-row) {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
    :deep(.arco-modal-body) {
      padding: 10px 80px !important;
    }
    :deep(.arco-col) {
      padding: 0 10px !important;
    }
  }
  .all-count {
    width: 100%;
    text-align: right;
    color: var(--color-text-1);
    font-size: 14px;
    margin-top: 12px;
    span {
      color: #165dff;
      font-size: 18px;
      font-weight: 600;
    }
  }
</style>
